import {
  ModalForm,
  ProColumns,
  ProForm,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  ProFormTextArea
} from '@ant-design/pro-components';
import '@umijs/max';
import {Button, Form, message} from 'antd';
import React from 'react';
import {invokeInterfaceInfoUsingPost} from "@/services/api-backend/interfaceInfoController";

export type Props = {
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};
type InterfaceInfo = {
  name: string;
  description: string;
  url: string;
  host: string;
  requestHeader: string;
  responseHeader: string;
  requestParams: string;
  method: string;
}

const CreateModal: React.FC<Props> = (props) => {

  const initialForm = {
    requestHeader: '{ "content-type": "application/json" }',
    responseHeader: '{ "content-type": "application/json" }',
    requestParams: '{ "": "" }',
  }
  const {columns, visible, onCancel, onSubmit} = props;
  //Form.useForm创建一个表单实例。form 是一个表单实例对象，代表了这个表单的所有操作。
  const [form] = Form.useForm<InterfaceInfo>();
  return (
    <ModalForm<ProFormInstance>
      title="上传接口"
      open={visible}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => onCancel?.(),
      }}
      submitTimeout={2000}
      onFinish={async (value) => {
        const res = await onSubmit?.(value)
        return true
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="name"
          label="接口名称"
          tooltip="最长为 24 位"
          placeholder="请输入接口名称"
          rules={[
            {required: true, message: '接口名称是必填项'},
          ]}
        />
        <ProFormTextArea
          width="md"
          name="description"
          label="描述"
          placeholder="请输入描述"
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormText
          width="md"
          name="host"
          label="服务器地址"
          tooltip="例如 https://example.com"
          placeholder="请输入服务器地址"
          rules={[
            {required: true, message: '服务器地址是必填项'},
            {
              validator: async (_, value) => {
                /**
                 * 正则表达式解读
                 * ^(http:\/\/|https:\/\/)：匹配 http:// 或 https:// 开头的 URL。
                 * ([a-zA-Z0-9.-]+|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})：
                 * [a-zA-Z0-9.-]+ 匹配主机名或域名，可以包含字母、数字、点和连字符。
                 * \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} 匹配 IPv4 地址。
                 * (:[0-9]{1,5})?：匹配可选的端口号部分（从 1 到 5 位数字）。
                 *
                 * 适用范围
                 * 支持带有 http 或 https 协议的地址。
                 * 支持域名形式的地址（如 example.com）。
                 * 支持 localhost 和 IPv4 地址（如 192.168.0.1）。
                 * 端口号是可选的，且范围为 1 到 65535（尽管正则表达式允许 1-5 位数字，实际应该符合端口号规范）。
                 *
                 */
                  // 正则表达式验证服务器地址格式
                const serverAddressPattern = /^(http:\/\/|https:\/\/)([a-zA-Z0-9.-]+|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:[0-9]{1,5})?$/;
                if (!value) {
                  return Promise.reject(new Error('请求路径不能为空'));
                }
                if (!serverAddressPattern.test(value)) {
                  return Promise.reject(new Error('请输入有效的请求路径，例如 https://example.com'));
                }
                return Promise.resolve();
              },
            },

          ]}
        />
        <ProFormText
          width="md"
          name="url"
          label="接口地址"
          tooltip="接口地址，例如 /api/v1/resource"
          placeholder="请输入接口地址，例如 /api/v1/resource"
          rules={[
            {required: true, message: '接口地址是必填项'},
            {
              validator: async (_, value) => {

                // 正则表达式验证接口路径格式
                const apiPathPattern = /^\/[a-zA-Z0-9_-]+(\/[a-zA-Z0-9_-]+)*$/;
                if (!value) {
                  return Promise.reject(new Error('请求路径不能为空'));
                }
                if (!apiPathPattern.test(value)) {
                  return Promise.reject(new Error('请输入有效的请求路径，例如  /api/v1/resource'));
                }
                return Promise.resolve();
              },

            },
          ]}
        />

      </ProForm.Group>
      <ProForm.Group>
        <ProFormTextArea
          width="md"
          name="requestHeader"
          label="请求头"
          tooltip="返回请求头(JSON)"
          placeholder="请输入请求头"
          initialValue={initialForm.requestHeader}
          rules={[
            {required: true, message: '请求头必填项'},
            {
              validator: (_, value) => {
                try {
                  if (value && value.length < 3) {
                    return Promise.reject(new Error('至少需要3个字符'));
                  }
                  JSON.parse(value);
                  return Promise.resolve();
                } catch (e) {
                  return Promise.reject(new Error('请求头格式必须是json'));
                }
              },
            },
          ]}
        />
        <ProFormTextArea
          width="md"
          name="responseHeader"
          label="响应头"
          tooltip="返回响应头(JSON)"
          placeholder="请输入响应头"
          initialValue={initialForm.responseHeader}
          rules={[
            {required: true, message: '响应头必填项'},

            {
              validator: (_, value) => {
                try {
                  if (value && value.length < 3) {
                    return Promise.reject(new Error('至少需要3个字符'));
                  }
                  JSON.parse(value);
                  return Promise.resolve();
                } catch (e) {
                  return Promise.reject(new Error('响应头格式必须是json'));
                }
              },
            }
          ]}
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormTextArea
          width="md"
          name="requestParams"
          label="请求参数"
          tooltip="返回请求参数(JSON)"
          placeholder="请输入请求参数"
          initialValue={initialForm.requestParams}
          rules={[
            {required: true, message: '请求参数必填项'},

            {
              validator: (_, value) => {
                try {
                  if (value && value.length < 3) {
                    return Promise.reject(new Error('至少需要3个字符'));
                  }
                  JSON.parse(value);
                  return Promise.resolve();
                } catch (e) {
                  return Promise.reject(new Error('请求参数格式必须是json'));
                }
              },
            }
          ]}
        />

        <ProFormTextArea
          width="md"
          name="result"
          label="返回结果"
          placeholder="请输入返回结果"
          tooltip="返回结果格式(JSON)"
          initialValue={initialForm.requestParams}
          // required={false}
          rules={[
            {
              validator: (_, value) => {
                try {
                  if (value) {
                    JSON.parse(value);
                  }
                  return Promise.resolve();
                } catch (e) {
                  return Promise.reject(new Error('请求参数格式必须是json'));
                }
              },
            }
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <div style={{display: 'flex', alignItems: 'center'}}>
          <ProFormSelect
            request={async () => [
              {
                value: '0',
                label: '免费',
              },
              {
                value: '1',
                label: '付费',
              },
            ]}
            initialValue={"0"}
            width="xs"
            name="free"
            label="是否付费"
            style={{ marginRight: '30px'}}
            rules={[
              {required: true, message: '是否付费必填项'},
            ]}
          />
          <ProFormSelect
            request={async () => [
              {
                value: 'POST',
                label: 'POST',
              },
              {
                value: 'GET',
                label: 'GET',
              },
            ]}

            width="xs"
            name="method"
            style={{flex: 1, marginRight: '30px'}}
            label="请求方法"
            rules={[
              {required: true, message: '请求方法必填项'},
            ]}
          />



          <Button
            style={{marginTop: '7px'}}
            htmlType="button"
            onClick={async () => {
              //校验获取当前form中的值
              const values = await form.validateFields()
              const res = await invokeInterfaceInfoUsingPost({
                ...values,
                userRequestParams: values.requestParams
              })
              try {
                if (res?.data) {
                  // console.log(res)
                  message.success("测试成功," + res?.message)
                }
              } catch (e) {
                message.error("请求错误," + e.message)
              }

            }}
            key="edit"
          >
            测试接口
          </Button>
        </div>

      </ProForm.Group>
    </ModalForm>

  );
};
export default CreateModal;
